<script lang="ts" setup >
import {ref, computed, Ref} from "vue";
import BHeader from "../../components/header/bHeader.vue";
import { goManage } from "../../tools/go"
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniEasyinput from "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import {getPerList, perInfo} from "../../api/role/per";
import {toast} from "../../components/popup/popup";

const showSearch = ref(false);
const searchKey = ref("");
const selectedMethod = ref("");
const isRefreshing = ref(false);

const methods = ["GET", "POST", "PUT", "DELETE", "PATCH"];

const apis: Ref<perInfo[]> = ref([]);

const filteredApis = computed(() => {
  return apis.value.filter((api) => {
    const methodMatch =
        !selectedMethod.value || api.perMod === selectedMethod.value;
    const searchMatch =
        !searchKey.value ||
        api.perName.toLowerCase().includes(searchKey.value.toLowerCase()) ||
        api.perPath.toLowerCase().includes(searchKey.value.toLowerCase());
    return methodMatch && searchMatch;
  });
});

const getMethodColor = (method: string) => {
  const colors = {
    GET: "#67C23A",
    POST: "#409EFF",
    PUT: "#E6A23C",
    DELETE: "#F56C6C",
    PATCH: "#909399",
  };
  return colors[method as keyof typeof colors] || "#909399";
};

const handleSearch = () => {
  showSearch.value = !showSearch.value;
};

const handleAdd = () => {
  toast("新增API","none")
};

const handleMethodFilter = (method: string) => {
  selectedMethod.value = selectedMethod.value === method ? "" : method;
};

const handleApiDetail = (api: perInfo) => {
  toast(`查看${api.perName}详情`,"none")
};

const copyPath = (path: string) => {
  //@ts-ignore
  uni.setClipboardData({
    data: path,
    success: () => {
      toast(`已复制API路径`,"none")
    },
  });
};

const loadMore = () => {
  //@ts-ignore
  toast(`加载更多`,"none")
};



const goBack = () => {
  goManage()
}

const ApiPage = {
  page: 1,
  size: 10
}

const APIAdd = () => {
  ApiPage.page++
  return  getPerList(ApiPage.page, ApiPage.size)
}

const API = () => {
  getPerList(ApiPage.page, ApiPage.size).then(res => {
    apis.value = res.data.records
  })
}

const init = () => {
  API()
}

init()
</script>

<template>
  <view class="back">
    <view class="container">
      <!-- 顶部导航栏 -->
      <b-header title="API管理" :go="goBack">
        <view class="header-actions">
          <uni-icons
              @click="handleSearch"
              type="search"
              size="22"
              color="#333333"
          ></uni-icons>
          <uni-button
              class="add-btn"
              @click="handleAdd"
              type="primary"
              size="mini"
          >新增</uni-button
          >
        </view>
      </b-header>


      <!-- 搜索过滤区 -->
      <view class="search-area" v-show="showSearch">
        <view class="search-input">
          <uni-easyinput
              v-model="searchKey"
              placeholder="搜索API名称或路径"
          ></uni-easyinput>
        </view>
        <view class="method-filter">
          <view
              v-for="method in methods"
              :key="method"
              :class="['method-tag', {'method-tag-active': selectedMethod === method}]"
              :style="{ backgroundColor: getMethodColor(method) }"
              @click="handleMethodFilter(method)"
          >
            {{ method }}
          </view>
        </view>
      </view>

      <!-- API列表区域 -->
      <scroll-view
          class="api-list"
          :scroll-y="true"
          @scrolltolower="loadMore"
          :refresher-triggered="isRefreshing"
      >
        <view
            class="api-card"
            v-for="api in filteredApis"
            :key="api.id"
            @click="handleApiDetail(api)"
        >
          <view class="api-header">
            <text class="api-name">{{ api.perName }}</text>
            <text
                class="api-status"
                :class="api.status === 1 ? 'status-online' : 'status-offline'"
            >
              {{ api.status === 1 ? "启用" : "禁用" }}
            </text>
          </view>
          <view class="api-content">
            <view
                class="method-tag"
                :style="{ backgroundColor: getMethodColor(api.perMod) }"
            >
              {{ api.perMod }}
            </view>
            <view class="api-path" @longpress="copyPath(api.perPath)"
            >{{ api.perPath }}</view
            >
          </view>
          <view class="api-footer">
            <text class="api-desc">{{ api.description }}</text>
            <text class="api-time">最后更新: {{ api.updateTime }}</text>
          </view>
          <uni-icons
              class="arrow-icon"
              type="right"
              size="16"
              color="#CCCCCC"
          ></uni-icons>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped lang="scss">
@use "../../static/css/main";
.back {
  @include main.useTheme(){
    .container {
      .api-list {
        .api-card {
          .status-online {
            background-color: #f0f9eb;
            color: #67c23a;
          }

          .status-offline {
            background-color: #f4f4f5;
            color: #909399;
          }

          .api-footer {
            .api-desc {
              font-size: 26rpx;
              color: #909399;
            }

            .api-time {
              font-size: 24rpx;
              color: #c0c4cc;
            }
            display: flex;
            flex-direction: column;
            gap: 10rpx;
          }

          .arrow-icon {
            position: absolute;
            right: 40rpx;
            top: 50%;
            transform: translateY(-50%);
          }

          .api-content {

            .api-path {
              font-family: monospace;
              background-color: main.getVal("one_lv_bg_color");
              padding: 10rpx 20rpx;
              border-radius: 6px;
              font-size: 28rpx;
              color: main.getVal("two_lv_text_color");
              flex: 1;
              word-break: break-all;
            }
            display: flex;
            align-items: center;
            gap: 20rpx;
            margin-bottom: 20rpx;
          }

          .api-header {
            .api-name {
              font-size: 32rpx;
              font-weight: bold;
              color: main.getVal("primary_text_color");
            }

            .api-status {
              font-size: 24rpx;
              padding: 4rpx 16rpx;
              border-radius: 20rpx;
            }
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;
          }
          background-color: main.getVal("primary_bg_color");
          border-radius: 16rpx;
          padding: 30rpx;
          margin-bottom: 20rpx;
          position: relative;
        }
        flex: 1;
        overflow: auto;
        padding: 20rpx;
      }

      .search-area {
        .method-filter {
          display: flex;
          flex-wrap: wrap;
          gap: 20rpx;
        }

        .search-input {
          margin-bottom: 20rpx;
        }
        padding: 20rpx 30rpx;
        background-color: main.getVal("primary_bg_color");
        border-bottom: 1px solid main.getVal("primary_border_color");
        flex-shrink: 0;
      }

      .method-tag {
        padding: 10rpx 20rpx;
        border-radius: 6px;
        color: #ffffff;
        font-size: 24rpx;
        font-weight: bold;
      }

      .method-tag-active {
        opacity: 0.8;
        transform: scale(0.95);
      }

      .header-actions {
        .add-btn {
          margin: 0;
        }
        display: flex;
        align-items: center;
        gap: 30rpx;
      }

      min-height: 100vh;
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: main.getVal("two_lv_bg_color");
    }
  }
}
</style>
